let lies = document.getElementsByClassName("JS_li");
// 二级菜单 JS_sub
let  sub = document.querySelectorAll(".JS_sub");
// 找兄弟标签的函数
function findBro(tag){
    let broArr = [];
    // 借用父标签找兄弟们，不包括 tag
    let parent = tag.parentNode ;  // 父标签
    let children  = parent.children;  // 找所有的孩子，包括了tag自己
    for(let i=0; i<=children.length-1; i++){
        // 如果 tag 不等于遍历的孩子，说明这个孩子就是兄弟
        if( tag !== children[i]){
            broArr.push(children[i]);
        }
    }
    return broArr ;  // 返回结果：兄弟标签数组
}
// 添加事件
for(let i=0; i<=lies.length-1 ; i++){
    lies[i].addEventListener("click",function(){
        // 找二级菜单方式一： let  submenu = lies[i].children[1] ;
        // 找二级菜单方式二：
        let submenu = sub[i];
        this.classList.add("current");
        submenu.classList.add("show");
        // 其它 li 标签就去掉对应的类
        let thisBro = findBro(this);  // 数组
        thisBro.forEach(function (item, index) {
            item.classList.remove("current");
            // 找到对应的二级菜单
            item.children[i].classList.remove("show");
        });

        // let submenuBro = findBro(submenu);
        // console.info(submenuBro);
    });
}
// 给 body 标签添加事件
// 点击二级菜单消失
document.body.addEventListener("click",function(event){
    // 事件冒泡。
    // event.target 获得实际点击的标签。 点击一级菜单的时候，发现点的是 a 。
    // 如果点击了的标签的 父标签有类 JS_li，说明点了一级菜单 a，那么二级菜单就不消失。
    if( event.target.parentNode.classList.contains("JS_li") ){
        // console.info("点击了一级菜单")
        return ;
    }else{  // 点击其它位置，二级菜单消失。
        // 遍历二级菜单（一级菜单 li 的索引跟 二级菜单保持一致  ）
        // 把二级菜单和一级菜单 li 的类都去掉。
        for(let i=0; i<=sub.length-1 ; i++){
            sub[i].classList.remove("show");
            lies[i].classList.remove("current");
        }
    }
});